<template>
 <div class="out-box">
        <input placeholder="姓名" v-model="newName"><br/>
        <input placeholder="号码" v-model.number="newTel"><br/>
        <span >状态选择:</span>
        <input type="radio" name="check" value="已完成" v-model="checkName">
        <label for="已完成">已完成</label>
        <input type="radio" name="check" value="未完成"  v-model="checkName">
        <label for="未完成">未完成</label><br/>
        <span> 你选择的是:{{checkName}}</span>
        <br/>
        <button v-on:click="add">确定</button>
 </div>
</template>

<script>
export default {
  name: "formAdd",
  data () {
    return {
        newName: "",
        newTel: "",
        checkName:"",
    };
  },
  methods: {
    add () {
      this.$emit("addList", {
                name: this.newName,
                tel: this.newTel,
                status:this.checkName ,
                del: "删除",

      });
      this.newName = '' ,
      this.newTel = '' 

   }
  }
};
</script>
<style>
    .out-box{
        border: solid 0.1rem black;
        padding:2rem;
        border-radius: 0.4rem;
        width: 40%;
        height: rem;
        margin: 1rem auto;
     }
     input{
       margin: 0.5rem;
     }

</style>

